<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>项目展示 - 龙天彪</title>
    <meta name="description" content="龙天彪的物联网工程项目展示，包括智能硬件、嵌入式开发等项目">
    <meta name="keywords" content="物联网项目,嵌入式开发,智能硬件,龙天彪,项目展示">
    <meta name="author" content="龙天彪">
    
    <!-- Open Graph Meta Tags -->
    <meta property="og:title" content="项目展示 - 龙天彪">
    <meta property="og:description" content="龙天彪的物联网工程项目展示">
    <meta property="og:type" content="website">
    <meta property="og:url" content="https://123caiji.github.io/projects.html">
    <meta property="og:image" content="https://123caiji.github.io/assets/images/avatar/avatar.png">
    
    <!-- Favicon -->
    <link rel="icon" type="image/png" href="assets/images/avatar/avatar.png">
    
    <!-- Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <!-- Styles -->
    <link rel="stylesheet" href="styles.css">
    
    <style>
        .projects-hero {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 120px 0 80px;
            text-align: center;
        }
        
        .projects-hero h1 {
            font-size: 3rem;
            margin-bottom: 1rem;
        }
        
        .projects-hero p {
            font-size: 1.2rem;
            opacity: 0.9;
            max-width: 600px;
            margin: 0 auto;
        }
        
        .project-filters {
            display: flex;
            justify-content: center;
            gap: 1rem;
            margin: 3rem 0;
            flex-wrap: wrap;
        }
        
        .filter-btn {
            padding: 0.5rem 1.5rem;
            border: 2px solid var(--accent);
            background: transparent;
            color: var(--accent);
            border-radius: 25px;
            cursor: pointer;
            transition: all 0.3s ease;
            font-weight: 500;
        }
        
        .filter-btn.active,
        .filter-btn:hover {
            background: var(--accent);
            color: white;
        }
        
        .projects-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
            gap: 2rem;
            margin: 3rem 0;
        }
        
        .project-card {
            background: var(--bg-primary);
            border-radius: 15px;
            overflow: hidden;
            box-shadow: 0 5px 15px var(--shadow);
            transition: all 0.3s ease;
            border: 1px solid var(--border-color);
        }
        
        .project-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 20px 40px var(--shadow-hover);
        }
        
        .project-image {
            height: 200px;
            background: var(--bg-secondary);
            position: relative;
            overflow: hidden;
        }
        
        .project-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.3s ease;
        }
        
        .project-card:hover .project-image img {
            transform: scale(1.05);
        }
        
        .project-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.7);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 1rem;
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        
        .project-card:hover .project-overlay {
            opacity: 1;
        }
        
        .project-link {
            width: 50px;
            height: 50px;
            background: var(--accent);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            text-decoration: none;
            font-size: 1.2rem;
            transition: all 0.3s ease;
        }
        
        .project-link:hover {
            background: var(--accent-hover);
            transform: scale(1.1);
        }
        
        .project-content {
            padding: 1.5rem;
        }
        
        .project-category {
            background: var(--accent);
            color: white;
            padding: 0.25rem 0.75rem;
            border-radius: 15px;
            font-size: 0.8rem;
            font-weight: 500;
            display: inline-block;
            margin-bottom: 1rem;
        }
        
        .project-title {
            font-size: 1.3rem;
            margin-bottom: 0.5rem;
            color: var(--text-primary);
        }
        
        .project-description {
            color: var(--text-secondary);
            line-height: 1.6;
            margin-bottom: 1rem;
        }
        
        .project-tech {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
            margin-bottom: 1rem;
        }
        
        .tech-tag {
            background: var(--bg-secondary);
            color: var(--text-secondary);
            padding: 0.25rem 0.75rem;
            border-radius: 15px;
            font-size: 0.8rem;
            font-weight: 500;
        }
        
        .project-stats {
            display: flex;
            gap: 1rem;
            font-size: 0.9rem;
            color: var(--text-muted);
        }
        
        .project-stats span {
            display: flex;
            align-items: center;
            gap: 0.25rem;
        }
        
        .back-to-home {
            position: fixed;
            top: 20px;
            left: 20px;
            background: var(--accent);
            color: white;
            padding: 0.75rem 1.5rem;
            border-radius: 25px;
            text-decoration: none;
            font-weight: 500;
            transition: all 0.3s ease;
            z-index: 1000;
        }
        
        .back-to-home:hover {
            background: var(--accent-hover);
            transform: translateY(-2px);
        }
        
        @media (max-width: 768px) {
            .projects-hero h1 {
                font-size: 2rem;
            }
            
            .project-filters {
                gap: 0.5rem;
            }
            
            .filter-btn {
                padding: 0.4rem 1rem;
                font-size: 0.9rem;
            }
            
            .projects-grid {
                grid-template-columns: 1fr;
            }
            
            .back-to-home {
                position: static;
                display: inline-block;
                margin-bottom: 2rem;
            }
        }
    </style>
</head>
<body>
    <!-- 返回首页按钮 -->
    <a href="index.html" class="back-to-home">
        <i class="fas fa-arrow-left"></i> 返回首页
    </a>

    <!-- 项目展示标题 -->
    <section class="projects-hero">
        <div class="container">
            <h1>项目展示</h1>
            <p>这里展示我在物联网工程领域的主要项目，包括智能硬件开发、嵌入式系统设计等创新实践</p>
        </div>
    </section>

    <!-- 项目筛选 -->
    <section class="container">
        <div class="project-filters">
            <button class="filter-btn active" data-filter="all">全部项目</button>
            <button class="filter-btn" data-filter="iot">物联网</button>
            <button class="filter-btn" data-filter="embedded">嵌入式</button>
            <button class="filter-btn" data-filter="web">Web应用</button>
            <button class="filter-btn" data-filter="mobile">移动应用</button>
        </div>

        <!-- 项目网格 -->
        <div class="projects-grid" id="projects-grid">
            <!-- 项目1 -->
            <div class="project-card" data-category="iot embedded">
                <div class="project-image">
                    <img src="assets/images/projects/smart-dormitory.jpg" alt="智能宿舍环境监控系统" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
                    <div class="image-placeholder" style="display: none;">
                        <i class="fas fa-home"></i>
                        <p>智能宿舍系统</p>
                    </div>
                    <div class="project-overlay">
                        <a href="#" class="project-link" title="查看详情">
                            <i class="fas fa-eye"></i>
                        </a>
                        <a href="#" class="project-link" title="查看代码">
                            <i class="fab fa-github"></i>
                        </a>
                        <a href="#" class="project-link" title="在线演示">
                            <i class="fas fa-external-link-alt"></i>
                        </a>
                    </div>
                </div>
                <div class="project-content">
                    <span class="project-category">物联网</span>
                    <h3 class="project-title">智能宿舍环境监控系统</h3>
                    <p class="project-description">
                        基于Arduino和传感器的智能宿舍环境监控系统，实时监测温度、湿度、光照等环境参数，
                        通过WiFi模块上传数据到云端，支持手机APP远程查看和控制。
                    </p>
                    <div class="project-tech">
                        <span class="tech-tag">Arduino</span>
                        <span class="tech-tag">ESP8266</span>
                        <span class="tech-tag">传感器</span>
                        <span class="tech-tag">WiFi</span>
                        <span class="tech-tag">Android</span>
                    </div>
                    <div class="project-stats">
                        <span><i class="fas fa-calendar"></i> 2025年1月</span>
                        <span><i class="fas fa-clock"></i> 2个月</span>
                        <span><i class="fas fa-users"></i> 个人项目</span>
                    </div>
                </div>
            </div>

            <!-- 项目2 -->
            <div class="project-card" data-category="iot embedded">
                <div class="project-image">
                    <img src="assets/images/projects/smart-plant.jpg" alt="智能植物养护系统" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
                    <div class="image-placeholder" style="display: none;">
                        <i class="fas fa-seedling"></i>
                        <p>智能植物养护</p>
                    </div>
                    <div class="project-overlay">
                        <a href="#" class="project-link" title="查看详情">
                            <i class="fas fa-eye"></i>
                        </a>
                        <a href="#" class="project-link" title="查看代码">
                            <i class="fab fa-github"></i>
                        </a>
                        <a href="#" class="project-link" title="在线演示">
                            <i class="fas fa-external-link-alt"></i>
                        </a>
                    </div>
                </div>
                <div class="project-content">
                    <span class="project-category">嵌入式</span>
                    <h3 class="project-title">基于Arduino的智能植物养护系统</h3>
                    <p class="project-description">
                        自动监测植物土壤湿度、光照强度，当环境条件不适宜时自动浇水、补光，
                        支持多种植物养护模式，具备数据记录和远程监控功能。
                    </p>
                    <div class="project-tech">
                        <span class="tech-tag">Arduino</span>
                        <span class="tech-tag">传感器</span>
                        <span class="tech-tag">水泵</span>
                        <span class="tech-tag">LED</span>
                        <span class="tech-tag">蓝牙</span>
                    </div>
                    <div class="project-stats">
                        <span><i class="fas fa-calendar"></i> 2024年12月</span>
                        <span><i class="fas fa-clock"></i> 1个月</span>
                        <span><i class="fas fa-users"></i> 个人项目</span>
                    </div>
                </div>
            </div>

            <!-- 项目3 -->
            <div class="project-card" data-category="iot embedded">
                <div class="project-image">
                    <img src="assets/images/projects/stm32-data-collection.jpg" alt="STM32物联网数据采集系统" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
                    <div class="image-placeholder" style="display: none;">
                        <i class="fas fa-microchip"></i>
                        <p>STM32数据采集</p>
                    </div>
                    <div class="project-overlay">
                        <a href="#" class="project-link" title="查看详情">
                            <i class="fas fa-eye"></i>
                        </a>
                        <a href="#" class="project-link" title="查看代码">
                            <i class="fab fa-github"></i>
                        </a>
                        <a href="#" class="project-link" title="在线演示">
                            <i class="fas fa-external-link-alt"></i>
                        </a>
                    </div>
                </div>
                <div class="project-content">
                    <span class="project-category">嵌入式</span>
                    <h3 class="project-title">STM32物联网数据采集系统</h3>
                    <p class="project-description">
                        基于STM32微控制器的多传感器数据采集系统，支持多种传感器接口，
                        通过LoRa无线通信模块实现远程数据传输，具备低功耗设计。
                    </p>
                    <div class="project-tech">
                        <span class="tech-tag">STM32</span>
                        <span class="tech-tag">LoRa</span>
                        <span class="tech-tag">传感器</span>
                        <span class="tech-tag">C语言</span>
                        <span class="tech-tag">FreeRTOS</span>
                    </div>
                    <div class="project-stats">
                        <span><i class="fas fa-calendar"></i> 2024年11月</span>
                        <span><i class="fas fa-clock"></i> 3周</span>
                        <span><i class="fas fa-users"></i> 个人项目</span>
                    </div>
                </div>
            </div>

            <!-- 项目4 -->
            <div class="project-card" data-category="web">
                <div class="project-image">
                    <img src="assets/images/projects/portfolio-website.jpg" alt="个人作品集网站" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
                    <div class="image-placeholder" style="display: none;">
                        <i class="fas fa-laptop-code"></i>
                        <p>作品集网站</p>
                    </div>
                    <div class="project-overlay">
                        <a href="#" class="project-link" title="查看详情">
                            <i class="fas fa-eye"></i>
                        </a>
                        <a href="#" class="project-link" title="查看代码">
                            <i class="fab fa-github"></i>
                        </a>
                        <a href="#" class="project-link" title="在线演示">
                            <i class="fas fa-external-link-alt"></i>
                        </a>
                    </div>
                </div>
                <div class="project-content">
                    <span class="project-category">Web应用</span>
                    <h3 class="project-title">个人作品集网站</h3>
                    <p class="project-description">
                        响应式个人作品集网站，展示个人技能、项目经历和学术成果，
                        采用现代化设计，支持深色模式，具备良好的用户体验。
                    </p>
                    <div class="project-tech">
                        <span class="tech-tag">HTML5</span>
                        <span class="tech-tag">CSS3</span>
                        <span class="tech-tag">JavaScript</span>
                        <span class="tech-tag">响应式</span>
                        <span class="tech-tag">GitHub Pages</span>
                    </div>
                    <div class="project-stats">
                        <span><i class="fas fa-calendar"></i> 2025年1月</span>
                        <span><i class="fas fa-clock"></i> 1周</span>
                        <span><i class="fas fa-users"></i> 个人项目</span>
                    </div>
                </div>
            </div>

            <!-- 项目5 -->
            <div class="project-card" data-category="mobile">
                <div class="project-image">
                    <img src="assets/images/projects/iot-mobile-app.jpg" alt="物联网移动应用" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
                    <div class="image-placeholder" style="display: none;">
                        <i class="fas fa-mobile-alt"></i>
                        <p>移动应用</p>
                    </div>
                    <div class="project-overlay">
                        <a href="#" class="project-link" title="查看详情">
                            <i class="fas fa-eye"></i>
                        </a>
                        <a href="#" class="project-link" title="查看代码">
                            <i class="fab fa-github"></i>
                        </a>
                        <a href="#" class="project-link" title="在线演示">
                            <i class="fas fa-external-link-alt"></i>
                        </a>
                    </div>
                </div>
                <div class="project-content">
                    <span class="project-category">移动应用</span>
                    <h3 class="project-title">物联网设备控制APP</h3>
                    <p class="project-description">
                        Android应用，用于控制和管理物联网设备，支持实时数据监控、
                        远程控制、历史数据查看等功能，采用Material Design设计。
                    </p>
                    <div class="project-tech">
                        <span class="tech-tag">Android</span>
                        <span class="tech-tag">Java</span>
                        <span class="tech-tag">MQTT</span>
                        <span class="tech-tag">REST API</span>
                        <span class="tech-tag">Material Design</span>
                    </div>
                    <div class="project-stats">
                        <span><i class="fas fa-calendar"></i> 2024年10月</span>
                        <span><i class="fas fa-clock"></i> 1个月</span>
                        <span><i class="fas fa-users"></i> 个人项目</span>
                    </div>
                </div>
            </div>

            <!-- 项目6 -->
            <div class="project-card" data-category="iot web">
                <div class="project-image">
                    <img src="assets/images/projects/smart-home-dashboard.jpg" alt="智能家居控制面板" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
                    <div class="image-placeholder" style="display: none;">
                        <i class="fas fa-home"></i>
                        <p>智能家居面板</p>
                    </div>
                    <div class="project-overlay">
                        <a href="#" class="project-link" title="查看详情">
                            <i class="fas fa-eye"></i>
                        </a>
                        <a href="#" class="project-link" title="查看代码">
                            <i class="fab fa-github"></i>
                        </a>
                        <a href="#" class="project-link" title="在线演示">
                            <i class="fas fa-external-link-alt"></i>
                        </a>
                    </div>
                </div>
                <div class="project-content">
                    <span class="project-category">物联网</span>
                    <h3 class="project-title">智能家居控制面板</h3>
                    <p class="project-description">
                        Web端智能家居控制面板，集成多种智能设备控制功能，
                        支持场景模式、定时任务、能耗统计等高级功能。
                    </p>
                    <div class="project-tech">
                        <span class="tech-tag">Vue.js</span>
                        <span class="tech-tag">Node.js</span>
                        <span class="tech-tag">WebSocket</span>
                        <span class="tech-tag">MySQL</span>
                        <span class="tech-tag">MQTT</span>
                    </div>
                    <div class="project-stats">
                        <span><i class="fas fa-calendar"></i> 2024年9月</span>
                        <span><i class="fas fa-clock"></i> 2个月</span>
                        <span><i class="fas fa-users"></i> 团队项目</span>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 页脚 -->
    <footer class="footer">
        <div class="container">
            <div class="footer-content">
                <p>&copy; 2025 龙天彪. 保留所有权利.</p>
                <div class="footer-links">
                    <a href="mailto:your-email@example.com" title="邮箱">
                        <i class="fas fa-envelope"></i>
                    </a>
                    <a href="https://github.com/123caiji" title="GitHub" target="_blank">
                        <i class="fab fa-github"></i>
                    </a>
                    <a href="https://linkedin.com/in/your-profile" title="LinkedIn" target="_blank">
                        <i class="fab fa-linkedin"></i>
                    </a>
                    <a href="https://twitter.com/your-handle" title="Twitter" target="_blank">
                        <i class="fab fa-twitter"></i>
                    </a>
                </div>
            </div>
        </div>
    </footer>

    <!-- JavaScript -->
    <script src="script.js"></script>
    <script>
        // 项目筛选功能
        document.addEventListener('DOMContentLoaded', function() {
            const filterBtns = document.querySelectorAll('.filter-btn');
            const projectCards = document.querySelectorAll('.project-card');

            filterBtns.forEach(btn => {
                btn.addEventListener('click', function() {
                    // 移除所有活动状态
                    filterBtns.forEach(b => b.classList.remove('active'));
                    // 添加当前按钮的活动状态
                    this.classList.add('active');

                    const filter = this.getAttribute('data-filter');

                    projectCards.forEach(card => {
                        if (filter === 'all' || card.getAttribute('data-category').includes(filter)) {
                            card.style.display = 'block';
                            card.style.animation = 'fadeInUp 0.6s ease-out';
                        } else {
                            card.style.display = 'none';
                        }
                    });
                });
            });

            // 项目卡片点击事件
            projectCards.forEach(card => {
                card.addEventListener('click', function(e) {
                    if (!e.target.closest('.project-link')) {
                        // 这里可以添加项目详情页面的跳转逻辑
                        console.log('点击项目:', this.querySelector('.project-title').textContent);
                    }
                });
            });
        });
    </script>
</body>
</html>
